<template>
    <el-dialog v-model="show" :title="title" width="35%" align-center @close="handleClose">
        <el-row :gutter="20" class="mb8">
            <el-col :span="11">
                客户名称：{{ form.customerName || '' }}
            </el-col>
            <el-col :span="13">
                交货日期：<el-date-picker v-model="form.deliveryDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    type="date" placeholder="请选择交货日期" />
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb20 mt20">
            <el-col :span="11">
                配件款式：{{ form.specsDetail }}
            </el-col>
            <el-col :span="13">
                生产数量：<el-input v-model="form.needNumber" style="width: 214px;" placeholder="请输入生产数量" />
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mb20 mt20">
            <el-steps style="width: 100%;" align-center>
                <el-step v-for="item in form.dataList" :key="item.id" :title="item.workName" status="finish" />
            </el-steps>
        </el-row>

        <el-row :gutter="20" class="mb20 mt20">
            <el-col :span="1.5" style="display: flex;">
                效果图：
                <el-upload ref="upload" v-model:file-list="fileList" :action="uploadImgUrl" :limit="1"
                    :on-success="handleFileSuccess" :on-exceed="handleExceed" :headers="headers"
                    :before-upload="beforeFileUpload">
                    <template #trigger>
                        <el-button icon="UploadFilled" type="primary">更改文件</el-button>
                    </template>
                </el-upload>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mb20 mt20">
            <el-col :span="24" style="display: flex; align-items: center;">
                <div style="width: 60px;">备注：</div><el-input v-model="form.remark" type="textarea"
                    placeholder="请输入备注" />
            </el-col>
        </el-row>

        <div class="mt20" style="color: red;">注：如更改效果图，等于更改了设计师对于此配件的定稿图，请慎重</div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">保 存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance, UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus'
import { getAllWorkingProcedureListApi } from '@/api/sj/productManagement/finalDraft';
import { globalHeaders } from "@/utils/request";
import { putEditDetailApi } from '@/api/sj/productManagement/integratedProduction';

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);


const show = ref(false);
const formRef = ref<FormInstance>();
const form = ref<any>({});
const title = ref('餐具盒生产单编辑');
const dialogVisible = ref();
const fileList = ref<UploadUserFile[]>([]);
const allList = ref<any>([]);
const upload = ref<UploadInstance>();
const filUrl = ref('');

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
        getAllList()
        fileList.value.length = 0
        form.value = props.initList
        fileList.value.push({
            name: '效果图',
            url: props.initList.fileUrl
        })
    }
}, { deep: true });

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
    upload.value!.submit()
};

const handleSubmit = async () => {
    if (filUrl.value) {
        form.value.fileUrl = filUrl.value
    }

    try {
        const { code } = await putEditDetailApi(form.value)
        if (code == 200) {
            emits('submit', true);
            proxy?.$modal.msgSuccess('操作成功');
            handleClose();
        }
    } catch (error) {

    }
};


const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};


const handleFileSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()
    filUrl.value = response.data.url
};

const beforeFileUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

/** 查询所有工序 */
const getAllList = async () => {
    try {
        const { code, data, } = await getAllWorkingProcedureListApi();

        if (code == 200) {
            allList.value = data;
        }
    } catch (error) {

    }
}

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>